<template>
    <div class="infoContainer">
        <el-card class="information">
            <div class="infoImg"><img src="../images/01.jpg" style="width: 100%;height:100%;border-radius: 50%;" />
            </div>
            <p class="changeImg">点击更换</p>
            <div class="formItem isNone">
                <el-form :model="form" :inline='true' class="infoItem">
                    <el-row justify="space-around" :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="用户名：">
                                <el-input v-model="form.name" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="生日：">
                                <!-- <el-col :span="18"> -->
                                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期"
                                    style="width: 100%" />
                                <!-- </el-col> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-form :inline='true' class="infoItem">
                    <el-row justify="space-around" :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="性别：">
                                <el-button>男</el-button>
                                <el-button>女</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="城市:">
                                <el-col :span="18">
                                    <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="Zone one" value="shanghai" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select>
                                </el-col>
                            </el-form-item>
                        </el-col>
                    </el-row>



                </el-form>
                <el-form :inline='true' class="infoItem">
                    <el-row justify="space-around" :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item>
                                <p>成长等级</p>
                                <p>Lv.1</p>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="技能水平：">
                                <el-select v-model="skill" placeholder="零基础">
                                    <el-option :label="val.data.name" :value="val.data.id" v-for="(val,index) in info" :key="index">{{val.data.name}}-{{val.data.desc}}</el-option>
                                </el-select>

                            </el-form-item>
                        </el-col>


                    </el-row>
                </el-form>
                <el-form class="infoItem">
                    <el-form-item label="兴趣技能：">
                        <el-badge value="x" class="item">
                            <el-button type="primary">爵士舞</el-button>
                        </el-badge>
                        <el-badge value="x" class="item" @click.self="handler">
                            <el-button>爵士舞</el-button>
                        </el-badge>

                    </el-form-item>
                </el-form>
                <el-form class="infoItem">
                    <el-col :span="12" :offset="6">
                        <el-form-item class="info-save">
                            <el-button type="primary" color="#f93684" style="width:150px;height:50px;margin-top:20px">
                                保存</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </div>

        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted,ref } from 'vue'
import { getMyInformation } from '../../../api/my/myvip/myvip'
// do not use same name with ref

let info = ref([])
let skill = ref('')
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
const handler = () => {
    console.log(123);

}
const handler11 = () => {
    console.log(111111);

}

onMounted(async() => {
    let rs = await getMyInformation()
    info.value = rs
    
})

</script>

<style scoped>
.formItem {
    width: 650px;
    margin: 0 auto;
}

.el-col-12 {
    width: 50%;
}

.information {
    width: 1020px;
    margin: 0 10px;
    /* text-align: center; */
}

.infoImg {
    width: 120px;
    height: 120px;
    margin: 0 auto;

}

.changeImg {
    color: #7d8090;
    font-size: 14px;
    text-align: center;
    padding: 12px;
    margin: 0;
}

.infoItem {
    margin: 20px 0;
}

.item {
    margin-top: 10px;
    margin-right: 40px;
}
</style>